<template>
    <!-- header -->
    <div class="nav-container page-component">
        <!--左侧导航 #start -->
        <div class="nav left-nav">
            <!-- 预约挂号 -->
            <div class="nav-item selected">
                <span class="v-link selected dark" :onclick="'javascript:window.location=\'/hospital/'+hospital.hoscode+'\''">预约挂号 </span>
            </div>

            <!-- 医院详情 -->
            <div class="nav-item ">
                <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hospital/detail/'+hospital.hoscode+'\''"> 医院详情 </span>
            </div>

            <!-- 预约须知 -->
            <div class="nav-item">
                <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hospital/notice/'+hospital.hoscode+'\''"> 预约须知 </span>
            </div>

            <!-- 停诊信息 -->
            <div class="nav-item ">
                <span class="v-link clickable dark"> 停诊信息 </span>
            </div>

            <!-- 查询/取消 -->
            <div class="nav-item ">
                <span class="v-link clickable dark"> 查询/取消 </span>
            </div>
        </div>
        <!-- 左侧导航 #end -->

        <!-- 右侧内容 #start -->
        <div class="page-container">
            <div class="hospital-home">   
                <!-- 公共头部区域  -->
                <div class="common-header">
                    <div class="title-wrapper">
                        <span class="hospital-title">{{ hospital.hosname }}</span>
                        <div class="icon-wrapper">
                        <span class="iconfont"></span>{{ hospital.param.hostypeString }}
                        </div>
                    </div>
                </div>

                <!-- 医院信息 -->
                <div class="info-wrapper">
                    <!-- 医院logo -->
                    <img class="hospital-img" :src="'data:image/jpeg;base64,'+hospital.logoData" :alt="hospital.hosname">

                    <!-- 医院详情 -->
                    <div class="content-wrapper">
                        <!-- 挂号规则 -->
                        <div> 挂号规则</div>
                        <div class="line">
                            <div><span class="label">预约周期：</span><span>{{ bookingRule.cycle }}天</span></div>
                            <div class="space"><span class="label">放号时间：</span><span>{{ bookingRule.releaseTime }}</span></div>
                            <div class="space"><span class="label">停挂时间：</span><span>{{ bookingRule.stopTime }}</span></div>
                        </div>

                        <!-- 退号时间 -->
                        <div class="line"><span class="label">退号时间：</span>
                            <span v-if="bookingRule.quitDay == -1">就诊前一工作日{{ bookingRule.quitTime }}前取消</span>
                            <span v-if="bookingRule.quitDay == 0">就诊前当天{{ bookingRule.quitTime }}前取消</span>
                        </div>

                        <!-- 预约规则 -->
                        <div style="margin-top:20px"> 医院预约规则</div>
                        <div class="rule-wrapper">
                            <ol>
                                <li v-for="item in bookingRule.rule" :key="item">{{ item }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
                
                <!-- 科室信息 -->
                <div class="title select-title"> 选择科室</div>

                <div class="select-dept-wrapper">
                    <div class="department-wrapper">
                        <div class="hospital-department">
                            <div class="dept-list-wrapper el-scrollbar" style="height: 100%;">

                                <div class="dept-list el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                                    <div class="el-scrollbar__view">
                                        <div class="sub-item" v-for="(item,index) in departmentVoList" :key="item.id" :class="index == activeIndex ? 'selected' : ''" @click="move(index,item.depcode)"> {{ item.depname }}</div>
                                    </div>
                                </div>

                                <div class="el-scrollbar__bar is-horizontal">
                                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                                </div>

                                <div class="el-scrollbar__bar is-vertical">
                                    <div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 91.4761%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="sub-dept-container">
                        <div v-for="(item,index) in departmentVoList" :key="item.id" :class="index == 0 ? 'selected' : ''" class="sub-dept-wrapper" :id="item.depcode">
                            <div class="sub-title">
                                <div class="block selected"></div>{{ item.depname }}
                            </div>
                            <div class="sub-item-wrapper">
                                <div v-for="it in item.children" :key="it.id" class="sub-item" @click="schedule(it.depcode)"><span class="v-link clickable">{{ it.depname }} </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- 右侧内容 #end -->
    </div>
    <!-- footer -->
    </template>

<script>
import hos_api from '@/api/hosp'
import userInfo_api from '@/api/userInfo'
import '@/assets/css/hospital_personal.css'
import '@/assets/css/hospital.css'
import cookie from 'js-cookie'

export default{
    data(){
        return{
            hoscode: null,//医院编号
            activeIndex: 0,//选中状态
            //医院详情信息
            hospital: {
                param: {},
                logoData:''
            },

            //预约规则信息
            bookingRule : {},

            //科室列表
            departmentVoList : []
        }
    },

    created(){
        this.hoscode = this.$route.params.hoscode
        this.init()
    },

    methods:{
        init(){
            //获取医院详情
            hos_api.findHosDetailsByHosCode(this.hoscode).then(res => {
                this.hospital = res.data.hospital
                this.bookingRule = res.data.bookingRule
            })

            //获取科室列表
            hos_api.findDeptListByHosCode(this.hoscode).then(res => {
                this.departmentVoList = res.data
            })
        },

        schedule(depcode){
        // 登录判断
        let token = cookie.get('token')
        if (!token) {
            loginEvent.$emit('loginDialogEvent')
            return
        }

        //判断用户是否完成认证
        userInfo_api.getUserInfo().then(res => {
            let authStatus = res.data.authStatus
            if(authStatus == 0){
                window.location.href="/user"
                return
            }
            if(authStatus == 1){
                this.$message.success("请耐心等待，您的实名认证平台正在审核")
            }
        })
        
        window.location.href = '/hospital/schedule?hoscode=' + this.hospital.hoscode + "&depcode="+ depcode
        }
    }
}
</script>
    